import React, { useState, useEffect } from 'react'
import { useNavigate } from "react-router-dom"
import "../Hcy_scss/Hcy_page5.scss"
import { Toast, NavBar } from 'react-vant';

export default function Hcy_page5() {
  const navigate = useNavigate()
  return (
    <div id='Hcy_page5'>
      <div className='top'>
        <NavBar
          title="取消订单"
          onClickLeft={() => { Toast('返回') }}
        />
      </div>
      <div className='animate__animated animate__bounceInRight'>
        <div className='main'>
          <h2>司机距您<span>1980米</span>，预计<span>2分钟</span>后到达，请耐心等待。</h2>
          <button><span><svg t="1728531057261" className="icon" viewBox="0 0 1080 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="896" width="16" height="16"><path d="M1002.519997 795.686337l-149.633874-150.658395c-30.142463-29.54932-79.589045-29.010099-110.216807 2.210807l-75.706652 75.868418c-5.014757-2.750028-9.490293-5.500056-15.044271-8.357928-47.828918-26.74537-112.912913-63.034955-181.933222-131.623887-68.481088-69.182076-104.608907-135.020981-131.354277-183.011665a375.4597 375.4597 0 0 0-8.304006-14.505049l50.578946-50.794634 25.073784-25.073785c31.113061-31.274828 31.706205-80.883175 2.156885-110.486417L258.502628 48.649329c-30.034619-30.142463-79.049823-29.010099-110.162884 2.210807l-42.328862 42.382784 1.132364 1.132365a255.429068 255.429068 0 0 0-35.049376 61.363369 238.17399 238.17399 0 0 0-15.637414 62.495733C36.451351 382.804688 111.618782 533.463082 315.228695 737.126918c281.581294 282.282282 508.054185 260.497747 518.083699 259.958525a276.243005 276.243005 0 0 0 62.387889-15.637414 252.894728 252.894728 0 0 0 61.201603-34.564077l1.132365 0.539222 42.868082-41.843563c30.57384-30.681685 31.652283-80.343954 1.617664-109.893274z" fill="#ffffff" p-id="897"></path></svg></span>
            <p>联系司机</p></button>
        </div>
        <div className='main1'>
          <p>本次取消免费，多次取消后可能会影响叫车服务。</p>
        </div>
        <div className='btm'>
          <p className='txt1'>查看取消规则</p>
          <button onClick={()=>{navigate("/Hcy_page7")}}>确定取消</button>
          <button className='btn' onClick={()=>{navigate("/app")}}>暂不取消</button>
        </div>
      </div>

    </div>
  )
}
